<template>
    <view class="container">
        <view class="container-body"  >
                <view class="card" v-for="(item,index) in typeList">
                    <view  class="tab" @click="goDept(item.id)" >
                        <cover-image class="img1" src='../../static/department.png'></cover-image>
						<view class="name">
						    <p style="width: 100%; text-align: center;">{{item.name}}</p>
						</view>
                    </view>
                  
            </view>
        </view>
 
    </view>
</template>

<script lang="ts" setup>
    import { ref } from 'vue';
    import axiosInstance from '@/Config/axiosConfig'
    import globalStore from '@/store/GlobalStore';
    import Emessage from '@/Utils/Message';
	import {onMounted} from 'vue'
	onMounted(()=>{
		getSubjects()
	})

    const typeList = ref([])
    const getSubjects = async () => {
        const response = await axiosInstance.get("/patient/getAllDept");
        if (response.data.code == 200) typeList.value = response.data.data;
        else Emessage("网络问题", "warning");
    }
	//获取去到下一个页面并且获取相关部门的信息
	const goDept=(id:any)=>{
		uni.navigateTo({url:'/pages/AppointmentDoctor/AppointmentDoctor?deptid='+id});
	}
  

</script>

<style>
   .container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

   .container-title {
        width: 100%;
        height: 20%;
        display: flex;
        flex-direction: row;
        justify-items: center;

    }

   .container-body {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 10rpx;
    }

   .card {
        border-radius: 25rpx;
        border: 2px solid gainsboro;
        margin: 10rpx;
        width: 45%;
        height: 150rpx;
        display: flex;
        flex-direction: column;
        margin-bottom: 10rpx;
    }

   .tab {
        width: 100%;
        height: 100%;
		display: flex;
		flex-direction: row;
    }

   .img1 {
        border-radius: 20rpx;
        width: 150rpx;
        height: 100rpx;
		margin-right: 10rpx;
		margin-top: 20rpx;
		margin-left: 10rpx;
    }

   .name {
	   display: flex;
        height: 100%;
		width: 60%;
        margin: auto;
     
		align-items: center;
		justify-content: center;
    }
</style>